為何需要前端監控

在開發階段，前端開發往往是所見即所得。如果程式碼有問題，通常在開發時就能看到異常，例如畫面錯亂或頁面直接空白，因此大部分問題都能及時發現和解決。

前端錯誤造成網頁空白

然而，程式碼很難做到完美無錯，特別是在應用運行於用戶端的各種環境中時。前端工程師應該很常遇到，用戶反饋「某某頁面有問題」，卻無法完整描述是哪些操作導致了問題。這樣的情形下，工程師只能看著用戶提供的截圖，一個個嘗試、甚至通靈來猜測問題所在，進而增加了問題排查的難度和成本。因此，前端監控機制的用途，就是來實時捕捉錯誤和異常，並提供上下文信息，以輔助工程師快速定位和解決問題。

前端監控的起源，不在前端

前端監控與Web技術的發展密不可分。無論是在早期只有靜態HTML頁面的Web萌芽階段，還是後來使用PHP、JSP等動態語言來生成前端頁面，這一時期的監控手段大多依賴於服務端的日誌（server logs）。前端的問題通常可以通過檢查服務端的錯誤報告和訪問日誌來進行追踪。這種方式雖然可以監測到訪問量、錯誤狀態和伺服器異常等情況，但無法精確追踪前端錯誤和用戶行為。

前後端分離，帶來前端監控的春天

隨著前後端分離架構的普及，前端承擔了越來越多的邏輯和交互，JavaScript、CSS等前端技術得到了飛速發展。單頁應用（SPA）和現代化框架（如React、Vue.js、Angular）的出現，讓前端頁面在client side執行更多的業務邏輯，且通過API與後端進行通信，這樣的變化使得傳統的伺服器端日誌已無法滿足監控需求。

現代前端監控不僅需要捕獲JavaScript錯誤，還需要監控資源載入狀況、用戶行為、性能指標（如頁面載入時間、交互延遲等）。為了實現這些監控需求，誕生了各種前端監控方案和工具。

常見的Sass前端監控方案

• Sentry：專注於錯誤追踪和異常捕獲，可以提供詳細的錯誤上下文和堆疊信息，並支持各種前端框架的集成，幫助開發者快速定位問題。
• LogRocket：可以錄製用戶操作，幫助工程師重現問題場景，並提供性能監控和錯誤報告，完整追踪用戶行為。
• DataDog、New Relic：除了前端錯誤監控，這些工具還可以與後端監控結合，提供全面的系統觀測能力。

小結

接下來的幾篇文章會先以Sentry的Demo為主，解析如何進行前端監控

ChangeLog

• 20240916-增加內文
• 20240915-初稿